<template>
  <div>

    <el-date-picker
        style="margin: 20px"
        v-model="pagination.dateTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
    </el-date-picker>

    <el-select style="margin: 20px" v-model="pagination.loginStatus" clearable placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <el-button type="primary" @click="findPage">查询</el-button>
    <div>
      <el-table
          v-loading="loading"
          :data="LoginLogList"
          border
          style="width: 100%">
        <el-table-column
            align="center"
            fixed
            prop="loginTime"
            label="时间"
        >
        </el-table-column>
        <el-table-column
            align="center"
            label="姓名"
        >
          <template slot-scope="scope">
            <el-tag effect="plain" type="info" v-html="scope.row.user.realName">
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="登录状态"
        >
          <template slot-scope="scope">
            <el-tag effect="dark" :type="scope.row.loginStatus==1?'warning':'danger'" v-html="scope.row.loginInfo">标签二
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            fixed="right"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="margin-top: 20px"
        background
        :total="total"
        @current-change="handleSelectionChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "LoginLog",
  data() {
    return {
      loading: false,
      total: 0,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        dateTime: [],
        loginStatus: null
      },
      options: [{
        value: '1',
        label: '登录成功'
      }, {
        value: '0',
        label: '登录失败'
      }],
      LoginLogList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  mounted() {
    this.findPage();
  },
  methods: {
    handleSelectionChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage();
    },
    deleteById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.axios.delete("/loginLog/deleteById?id=" + id).then(resp => {
          if (resp.data.statusCode == 200) {
            this.$message({
              type: 'success',
              message: resp.data.message
            });
            this.findPage();
          }
        })
      })
    },
    findPage() {
      this.loading = true;
      this.axios.post("/loginLog/findPage", this.pagination).then(resp => {
        if (resp.data.statusCode == 200) {
          this.total = resp.data.data.total;
          this.LoginLogList = resp.data.data.data;
        }
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>

</style>
